<template>
	<view class="pageContainer">
		<scroll-view scroll-y="true" class="scroll-main">
			<view class="scroll-item">
				<view class="card-mode" style="padding-top: 20px;">
					<l-progress-circle index="3" :strokeWidth="15" :percent="50" progress-color="#81A0FD" width="420rpx">
					  <view class="progress-mode">
					    <view class="progress-score">90</view>
					    <view class="progress-text">得分</view>
					  </view>
					</l-progress-circle>
					<view class="card-main" style="margin-top: 34px;">
						<view class="card-main-box">
							<view class="card-main-box-title">考试名称：</view>
							<view class="card-main-box-text">2025年度职业人员综合测评考试A卷</view>
						</view>
						<view class="card-main-box">
							<view class="card-main-box-title">交卷时间：</view>
							<view class="card-main-box-text">2025.04.29 10:30:32</view>
						</view>
					</view>
				</view>
				<view class="card-mode">
					<view class="card-section">
						<uni-section class="mb-10" title="考试情况" type="line"></uni-section>
					</view>
					<view class="card-main">
						<view class="card-content">
							<view class="card-box">
								<view class="card-box-top">一共</view>
								<view class="card-box-bottom">
									<text><text style="font-size: 14px;margin-right: 2px;">5</text>题</text>
								</view>
							</view>
							<view class="card-border"></view>
							<view class="card-box">
								<view class="card-box-top">答对</view>
								<view class="card-box-bottom" style="color: #06BC58;">
									<text><text style="font-size: 14px;margin-right: 2px;">5</text>题</text>
								</view>
							</view>
							<view class="card-border"></view>
							<view class="card-box">
								<view class="card-box-top">答错</view>
								<view class="card-box-bottom" style="color: #FA5846;">
									<text><text style="font-size: 14px;margin-right: 2px;">5</text>题</text>
								</view>
							</view>
							<view class="card-border"></view>
							<view class="card-box">
								<view class="card-box-top">未答</view>
								<view class="card-box-bottom" style="color: #FA5846;">
									<text><text style="font-size: 14px;margin-right: 2px;">5</text>题</text>
								</view>
							</view>
							<view class="card-border"></view>
							<view class="card-box">
								<view class="card-box-top">总用时</view>
								<view class="card-box-bottom">
									<text><text style="font-size: 14px;margin-right: 2px;">22</text>分</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="card-mode">
					<view class="card-section">
						<uni-section class="mb-10" title="答题卡" type="line"></uni-section>
						<view class="question-type">
							<view class="question-type-box">
								<view class="question-type-dot"></view>
								<view class="question-type-text">未答</view>
							</view>
							<view class="question-type-box">
								<view class="question-type-dot" style="background-color: #06BC58;"></view>
								<view class="question-type-text">答对</view>
							</view>
							<view class="question-type-box">
								<view class="question-type-dot" style="background-color: #FA5846;"></view>
								<view class="question-type-text">答错</view>
							</view>
						</view>
					</view>
					<view class="card-main">
						<view class="answerSheet-content-box" v-for="(questionItem,questionIndex) in questionType"
							:key="questionIndex" v-if="questionItem.questionList.length>0">
							<view class="answerSheet-content-box-title">{{questionItem.text}}</view>
							<view class="answerSheet-content-box-main">
								<view class="answerSheet-radio-mode" v-for="(itemH,indexH) in questionItem.questionList"
									:key="indexH">
									<view class="answerSheet-radio-box"
										:class="[itemH.userAnswer==='Y'?'answerSheet-radio-box-Y':itemH.userAnswer==='N'?'answerSheet-radio-box-N':'']"
										@click="appointedSubject(itemH.currentIndex)">
										{{itemH.currentIndex+1}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom-mode">
			<button type="primary" class="button-box" @click="analysisOp(1)">全部解析</button>
			<button type="primary" plain="true" class="button-box" @click="analysisOp(2)">错题解析</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				questionType: [{
						type: 0,
						text: "单选题",
						questionList: [
							{
								id: '2531627',
								userAnswer: 'Y',
								currentIndex: 1
							},
							{
								id: '2531627',
								userAnswer: '',
								currentIndex: 2
							}
						]
					},
					{
						type: 1,
						text: "多选题",
						questionList: [
							{
								id: '2531627',
								userAnswer: 'Y',
								currentIndex: 3
							},
							{
								id: '2531627',
								userAnswer: 'N',
								currentIndex: 4
							}
						]
					},
					{
						type: 2,
						text: "判断题",
						questionList: [
							{
								id: '2531627',
								userAnswer: 'Y',
								currentIndex: 5
							},
							{
								id: '2531627',
								userAnswer: 'N',
								currentIndex: 6
							}
						]
					},
					{
						type: 3,
						text: "填空题",
						questionList: [
							{
								id: '2531627',
								userAnswer: 'Y',
								currentIndex: 7
							}
						]
					},
					{
						type: 4,
						text: "问答题",
						questionList: [
							{
								id: '2531627',
								userAnswer: 'N',
								currentIndex: 8
							}
						]
						
					}
				],
			}
		},
		methods: {
			//开始操作
			analysisOp(type) {
				this.jump(`/pages/examinationManagement/detail/testPaper/analysis/index`)
			},
			//跳转
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.pageContainer {
		width: 100vw;
		height: 100vh;
	}

	.scroll-main {
		width: 100%;
		height: calc(100% - 64px);

		.scroll-item {
			width: 100%;
			padding: 10px 10px 20px;
			box-sizing: border-box;
		}
	}

	.card-mode {
		width: 100%;
		padding: 14px 14px 16px;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 6px;
		margin-bottom: 10px;

		.card-content {
			width: 100%;
			height: 62px;
			border-radius: 6px;
			background-color: #F7F8FA;
			padding: 10px 0;
			box-sizing: border-box;
			align-items: center;
			justify-content: space-between;
			display: flex;
			.card-border{
				width: 1px;
				height: 16px;
				background-color: #E6E6E6;
			}
			.card-box {
				width: calc(100%/5);

				.card-box-top {
					width: 100%;
					font-size: 12px;
					color: #898EA1;
					align-items: center;
					justify-content: center;
					display: flex;
				}

				.card-box-bottom {
					width: 100%;
					font-size: 11px;
					color: #0887FE;
					align-items: flex-end;
					justify-content: center;
					display: flex;
					margin-top: 8px;
				}
			}
		}

		.card-section {
			width: 100%;
			align-items: center;
			justify-content: space-between;
			display: flex;
			.question-type{
				align-items: center;
				display: flex;
				.question-type-box{
					align-items: center;
					display: flex;
					margin-left: 10px;
					.question-type-dot{
						width: 10px;
						height: 10px;
						border-radius: 100px;
						background-color: #f4f5f6;
						margin-right: 6px;
					}
					.question-type-text{
						font-size: 12px;
						color: #898EA1;
						margin-right: 6px;
					}
				}
			}
			::v-deep {
				.uni-section {
					margin-top: 0;
				}
				.uni-section-header {
					padding: 0;
					width: max-content;
				}
				.uni-section__content-title{
					font-size: 16px;
					font-weight: 600;
				}
			}
		}

		.card-main {
			width: 100%;
			margin-top: 20px;

			.card-main-box {
				width: 100%;
				line-height: 26px;
				font-size: 14px;
				color: #898EA1;
				justify-content: space-between;
				display: flex;
				margin-top: 4px;
				.card-main-box-title{
					width: 80px;
				}
				.card-main-box-text{
					width: calc(100% - 80px);
					justify-content: flex-end;
					display: flex;
					text-align: end;
				}
			}
		}
	}

	.bottom-mode {
		width: 100%;
		height: 64px;
		padding: 0 10px;
		box-sizing: border-box;
		background-color: #fff;
		border-top: 1px solid #F0F0F0;
		align-items: center;
		justify-content: space-between;
		display: flex;

		.button-box {
			width: 45%;
			height: 42px;
			border-radius: 100px;
			box-sizing: border-box;
			align-items: center;
			justify-content: center;
			display: flex;
		}
	}
	//半圆弧
	.progress-mode{
		width: 100%;
		.progress-score{
			font-size: 36px;
			font-weight: 500;
		}
		.progress-text{
			font-size: 13px;
			color: #898EA1;
			margin-top: 8px;
		}
	}
	//答题卡
	.answerSheet-content-box {
		width: 100%;
		margin-bottom: 16px;
	
		.answerSheet-content-box-title {
			width: 100%;
			font-size: 14px;
			color: #8e8e8f;
			margin-bottom: 14px;
		}
	
		.answerSheet-content-box-main {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
	
			.answerSheet-radio-mode {
				width: calc(100%/5);
	
				.answerSheet-radio-box {
					width: 34px;
					height: 34px;
					font-size: 14px;
					font-weight: 500;
					color: #000000;
					border-radius: 100px;
					background-color: #f4f5f6;
					box-sizing: border-box;
					align-items: center;
					justify-content: center;
					display: flex;
					margin: 8px;
				}
	
				.answerSheet-radio-box-Y {
					color: #ffffff;
					background-color: #06BC58;
				}
				.answerSheet-radio-box-N {
					color: #ffffff;
					background-color: #FA5846;
				}
			}
		}
	}
</style>